<template>
    <!-- 预览界面 -->
    <div id="render-app" @mousewheel="mouseWheel">
        <div
            v-if="configData.layer"
            id="render-box"
            ref="imageTofile"
            v-loading="loadingContro"
            :element-loading-text="loadingText"
            :style="layerStyle"
            class="topo-render"
            @mousedown="mouseDown"
            @mouseenter="mouseEnter"
            @mouseleave="mouseLeave"
            @mousemove="mouseMove"
            @mouseup="mouseUp"
            @contextmenu.prevent="onContextmenu"
        >
            <template>
                <div
                    v-for="(component, index) in configData.components"
                    v-show="component.style.visible == undefined ? true : component.style.visible"
                    :key="index"
                    :class="{ 'topo-render-wrapper-clickable': component.action.length > 0 }"
                    :style="{
                        left: component.style.position.x + 'px',
                        top: component.style.position.y + 'px',
                        width: component.style.position.w + 'px',
                        height: component.style.position.h + 'px',
                        backgroundColor: component.type == 'flow-bar' || component.type == 'flow-bar-dynamic' ? 'transparent' : component.style.backColor,
                        zIndex: component.style.zIndex,
                        transform: component.style.transformType,
                        opacity: component.style.opacity,
                        'border-radius': component.style.borderRadius + 'px',
                        'box-shadow': '0 0 ' + component.style.boxShadowWidth + 'px 0 ' + component.style.boxShadowColor,
                    }"
                    class="topo-render-wrapper"
                    v-on:[getEvent(component)]="throttle(component)"
                >
                    <component v-bind:is="parseView(component)" ref="spirit" :detail="component" />
                </div>
            </template>
        </div>
        <Mqtt ref="mqttUtil" @mqttAccept="mqttAccept" />
        <el-dialog :close-on-click-modal="false" :title="windowPage" :visible.sync="childPage" :width="windowWidth + 'px'" append-to-body>
            <iframe :src="childUrl" :style="{ width: windowWidth - 40 + 'px', height: windowHeight + 'px' }"></iframe>
        </el-dialog>
    </div>
</template>

<script>
import TopoBase from './TopoBase';
import topoUtil from '@/views/zutai/components/topo/util/topo-util';
import Mqtt from '@/views/zutai/components/mqtt';
import { mapMutations } from 'vuex';
import { toPng } from 'html-to-image';
import request from '@/utils/request';

export default {
    name: 'TopoRender',
    extends: TopoBase,
    components: {
        Mqtt,
    },
    props: {
        defaultValue: Number,
        isShare: Boolean,
    },
    computed: {
        layerStyle: function () {
            var styles = [];
            styles = [];
            if (this.configData.layer.backColor) {
                styles.push(`background-color: ${this.configData.layer.backColor}`);
            }
            if (this.configData.layer.backgroundImage) {
                styles.push(`background-image: url("${this.configData.layer.backgroundImage}")`);
            }
            if (this.configData.layer.width > 0) {
                styles.push(`width: ${this.configData.layer.width}px`);
            }
            if (this.configData.layer.height > 0) {
                styles.push(`height: ${this.configData.layer.height}px`);
            }
            if (this.scaleValue) {
                styles.push(`transform:scale(${this.scaleValue});transform-origin:  0 0;`);
            }
            styles.push('overflow:hidden');
            var style = styles.join(';');
            return style;
        },
    },
    data() {
        return {
            eventName: 'click',
            configData: {},
            num: null,
            selectedValue: this.defaultValue,
            width: 0,
            height: 0,
            ztTimer: null,
            ishow: true,
            keyVertical: 0,
            loadingContro: false,
            loadingText: '指令下发中...',
            bindList: [],
            time: null,
            ztGuid: '',
            childPage: false,
            childUrl: '',
            windowWidth: '1920',
            windowHeight: '945',
            windowPage: '子界面',
            key: 0,
            newZoom: 1,
            displacement: {
                scale: 1,
            },
            throttleTimer: null,
            orderSendTimer: null,
            isOnline: false,
            deviceTimer: null,
            notifyShow: false,
            isFullscreen: false,
            x: 0,
            y: 0,
            l: 0,
            t: 0,
            operateDom: '',
            pageToken: '',
            scaleValue: '1',
        };
    },
    methods: {
        //获取v-on事件
        getEvent(component) {
            if (component.dataBind.event) {
                return component.dataBind.event;
            } else {
                return 'click';
            }
        },
        //下载图片
        downloadImage(url) {
            // 如果是在网页中可以直接创建一个 a 标签直接下载
            let a = document.createElement('a');
            a.href = url;
            a.download = document.title;
            a.click();
        },
        htmlToImage() {
            toPng(this.$refs.imageTofile)
                .then((dataUrl) => {
                    this.downloadImage(dataUrl);
                })
                .catch((error) => {
                    console.error('oops, something went wrong!', error);
                });
        },
        mouseLeave(e) {
            // console.log('鼠标离开了');
            this.operateDom = 'default';
        },
        mouseEnter(e) {
            // console.log('鼠标进来了');
            this.operateDom = 'default';
        },
        mouseDown(e) {
            e.stopPropagation();
            e.preventDefault();
            let idDown = document.getElementById('render-box');
            idDown.style.cursor = 'pointer';
            // console.log(this.x,this.y,this.l,this.t);
            this.x = e.clientX;
            this.y = e.clientY;
            this.l = idDown.offsetLeft;
            this.t = idDown.offsetTop;
            this.operateDom = 'render-box';
        },
        mouseMove(e) {
            e.preventDefault();
            if (!this.configData.layer.dragZoom) {
                return;
            }
            let point = document.getElementById('render-box');
            // console.log('鼠标移动',e);
            if (this.operateDom == 'render-box') {
                let nx = e.clientX; // 随着 缩放，这个值是变的
                let ny = e.clientY; // 随着 缩放，这个值是变的

                let nl = nx - (this.x - this.l);
                let nt = ny - (this.y - this.t);

                point.style.left = nl + 'px';
                point.style.top = nt + 'px';
                sessionStorage.setItem('boxLeft-' + this.ztGuid, point.style.left);
                sessionStorage.setItem('boxTop-' + this.ztGuid, point.style.top);
                e.stopImmediatePropagation();
            }
        },
        mouseWheel(e) {
            // 滚动事件
            if (!this.configData.layer.dragZoom) {
                return;
            }
            if (e.wheelDelta >= 120) {
                this.selectedValue = this.selectedValue + 10;
            } else if (e.wheelDelta <= -120) {
                if (this.selectedValue > 30) {
                    this.selectedValue = this.selectedValue - 10;
                }
            }
            // console.log('缩放',this.selectedValue);
            this.saveSf();
        },
        mouseUp(e) {
            this.operateDom = 'default';
            if (e.target.id) {
                let idDoc = document.getElementById(e.target.id);
                idDoc.style.cursor = 'default';
            }
        },
        initLeftTop() {
            if (!this.configData.layer.dragZoom) {
                let renderApp = document.getElementById('render-app');
                renderApp.style.overflowY = 'auto';
                renderApp.style.overflowX = 'auto';
                return;
            }
            let renderApp = document.getElementById('render-app');
            renderApp.style.overflow = 'hidden';
            if (sessionStorage.getItem('boxLeft-' + this.ztGuid) != 'undefined') {
                let point = document.getElementById('render-box');
                point.style.left = sessionStorage.getItem('boxLeft-' + this.ztGuid);
                point.style.top = sessionStorage.getItem('boxTop-' + this.ztGuid);
            }
        },
        getInitData() {
            let param = {
                ztGuid: this.ztGuid,
            };
            let url = '/zutai/bDeviceRealData/getInitData';
            request({
                url: url,
                method: 'get',
                headers: {
                    Authorization: 'Bearer ' + this.pageToken,
                },
                params: param,
            }).then((res) => {
                //let ztData=JSON.parse()
                // console.log("组态初始化数据",res.data);
                res.data.forEach((element) => {
                    this.setMqttData(element);
                });
            });
        },
        clickFullscreen() {
            let element = document.getElementById('render-app'); //指定全屏区域元素
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen();
            }
        },
        onContextmenu(event) {
            this.$contextmenu({
                items: [
                    {
                        label: '图片生成',
                        divided: true,
                        icon: 'el-icon-download',
                        onClick: () => {
                            //this.toImage();
                            this.htmlToImage();
                        },
                    },
                    {
                        label: '全屏展示',
                        icon: 'el-icon-full-screen',
                        onClick: () => {
                            this.clickFullscreen();
                        },
                    },
                    {
                        label: '重新加载',
                        divided: true,
                        icon: 'el-icon-refresh',
                        onClick: () => {
                            this.$router.go(0);
                        },
                    },
                ],
                event, // 鼠标事件信息
                customClass: 'custom-class', // 自定义菜单 class
                zIndex: 9999, // 菜单样式 z-index
                minWidth: 230, // 主菜单最小宽度
            });

            return true;
        },
        ...mapMutations('topoEditor', ['setMqttData']),
        getDeviceRealStatus() {
            let query = {
                deviceMac: this.$route.query.deviceImei,
            };
            let url = '/zutai/bDeviceManager/getDeviceStatus';
            request({
                url: url,
                method: 'get',
                headers: {
                    Authorization: 'Bearer ' + this.pageToken,
                },
                params: query,
            })
                .then((res) => {
                    this.isOnline = res.data;
                })
                .catch((err) => {});
        },
        //保存缩放
        saveSf() {
            sessionStorage.setItem('selectedValue-' + this.$store.state.app.guid ? this.$store.state.app.guid : this.$route.query.guid, this.selectedValue);
        },
        parseView(component) {
            return topoUtil.parseViewName(component);
        },
        //点击节流
        throttle(component) {
            if (this.throttleTimer) {
                clearTimeout(this.throttleTimer);
            }
            let that = this;
            this.throttleTimer = setTimeout(() => {
                that.doClickComponent(component);
            }, 200);
        },
        doClickComponent(component) {
            if (component.componentShow && component.componentShow.indexOf('单击') > -1 && component.dataBind.djAction) {
                // console.log('组件点击')
                if (component.dataBind.action == '外部链接') {
                    window.open(component.dataBind.redirectUrl);
                } else if (component.dataBind.action == '组态界面') {
                    //当前页面打开
                    if (component.dataBind.openModels == '1') {
                        if (component.dataBind.ztPage) {
                            this.ztGuid = component.dataBind.ztPage;
                            const routeUrl = this.$router.resolve({
                                query: {
                                    guid: this.ztGuid,
                                    deviceImei: component.dataBind.deviceImei,
                                },
                            });
                            const ip = window.location.host;
                            window.location.href = 'http://' + ip + '/' + routeUrl.href;
                            // 跳转后立即刷新页面
                            window.location.reload();
                        } else {
                            this.$message('无绑定组态界面');
                        }
                    } else if (component.dataBind.openModels == '2') {
                        if (component.dataBind.ztPage) {
                            this.ztGuid = component.dataBind.ztPage;
                            const routeUrl = this.$router.resolve({
                                path: '/fullscreen',
                                query: {
                                    guid: this.ztGuid,
                                    deviceImei: component.dataBind.deviceImei,
                                },
                            });
                            // console.log("打开新窗口");
                            window.open(routeUrl.href, '_blank');
                        } else {
                            this.$message('无绑定组态界面');
                        }
                    } else {
                        if (component.dataBind.ztPage) {
                            this.ztGuid = component.dataBind.ztPage;
                            this.childPage = true;
                            if (component.dataBind.windowHeight) {
                                this.windowHeight = component.dataBind.windowHeight;
                            }
                            if (component.dataBind.windowWidth) {
                                this.windowWidth = component.dataBind.windowWidth;
                            }
                            this.windowPage = component.dataBind.ztPageName;
                            // let ip = this.topoUtil.getServerIp;
                            const ip = window.location.origin;
                            this.childUrl = ip + '/#/fullscreen?guid=' + this.ztGuid + '&deviceImei=' + component.dataBind.deviceImei + '&t=' + new Date().getTime();
                        } else {
                            this.$message('无绑定组态界面');
                        }
                    }
                } else if (component.dataBind.action == '操作变量') {
                    if (component.dataBind.paramValue) {
                        this.controChange(component.dataBind);
                    } else {
                        let tipMsg = '提示：请输入变量值';
                        if (component.dataBind.tipMsg) {
                            tipMsg = '提示：' + component.dataBind.tipMsg;
                        }
                        let scrollX = window.scrollX; // 获取水平滚动条位置
                        let scrollY = window.scrollY; // 获取垂直滚动条位置
                        // document.body.style.transform = 'scale(1)';
                        this.$prompt(tipMsg, component.dataBind.paramName, {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            closeOnClickModal: false,
                            closeOnPressEscape: false,
                            inputValue: component.dataBind.paramValue == '' ? '0' : component.dataBind.paramValue,
                            inputErrorMessage: '变量值不能为空',
                            inputValidator: (value) => {
                                // 点击按钮时，对文本框里面的值进行验证
                                if (!value) {
                                    return '变量值不能为空';
                                }
                                if (isNaN(value)) {
                                    return '变量值必须是数字';
                                }
                            },
                        })
                            .then(({ value }) => {
                                component.dataBind.paramValue = value;
                                this.controChange(component.dataBind);
                                component.dataBind.paramValue = '';
                                // document.body.style.transform = 'scale(' + this.newZoom + ')';
                                // window.scrollTo(scrollX, scrollY);
                            })
                            .catch(() => {
                                // document.body.style.transform = 'scale(' + this.newZoom + ')';
                                // window.scrollTo(scrollX, scrollY);
                            });
                    }
                } else if (component.type == 'imageSwitch' && component.dataBind.paramField) {
                    if (component.dataBind.controValue == '0关1开' && component.dataAction.actualValue == '关') {
                        component.dataBind.paramValue = '1';
                        this.controChange(component.dataBind);
                    } else if (component.dataBind.controValue == '0开1关' && component.dataAction.actualValue == '关') {
                        component.dataBind.paramValue = '0';
                        this.controChange(component.dataBind);
                    } else if (component.dataBind.controValue == '0关1开' && component.dataAction.actualValue == '开') {
                        component.dataBind.paramValue = '0';
                        this.controChange(component.dataBind);
                    } else if (component.dataBind.controValue == '0开1关' && component.dataAction.actualValue == '开') {
                        component.dataBind.paramValue = '1';
                        this.controChange(component.dataBind);
                    } else if (component.dataBind.controValue == '多态开关') {
                        //多态开关按照状态开关以此下发
                        let paramIndex = 0;
                        component.dataBind.stateList.forEach((element, index) => {
                            if (element.paramData == component.dataBind.paramValue) {
                                if (index + 1 == component.dataBind.stateList.length) {
                                    paramIndex = 0;
                                } else {
                                    paramIndex = index + 1;
                                }
                            }
                        });
                        component.dataBind.paramValue = component.dataBind.stateList[paramIndex].paramData;
                        this.controChange(component.dataBind);
                    } else {
                        component.dataBind.paramValue = '0';
                        this.controChange(component.dataBind);
                    }
                } else if (component.dataBind.action == '变量信息') {
                    console.log(component.dataBind);
                    if (!component.dataBind.imei || !component.dataBind.paramField) {
                        return;
                    }
                    let queryParams = {
                        pageNum: 1,
                        pageSize: 1,
                        deviceImei: component.dataBind.imei,
                        paramField: component.dataBind.paramField,
                    };
                    let url = '/zutai/bDeviceRealData/list';
                    request({
                        url: url,
                        method: 'get',
                        params: queryParams,
                    }).then((res) => {
                        if (res.rows.length > 0) {
                            let deviceDetail = res.rows[0];
                            var infoContent =
                                `<div>` +
                                `<p>设备编号：` +
                                deviceDetail.deviceImei +
                                `</p>` +
                                `<p>设备名称：` +
                                deviceDetail.deviceName +
                                `</p>` +
                                `<p>变量名称：` +
                                deviceDetail.paramName +
                                `</p>` +
                                `<p>实时数据：` +
                                (deviceDetail.paramValue == null ? 0 : deviceDetail.paramValue) +
                                (deviceDetail.paramUnit == null ? '' : deviceDetail.paramUnit) +
                                `</p>` +
                                `</div>`;
                            this.$notify({
                                title: '变量信息',
                                dangerouslyUseHTMLString: true,
                                message: infoContent,
                                duration: 3000,
                            });
                        }
                    });
                } else if (component.dataBind.action == '函数定义') {
                    const func = component.dataBind.function;
                    const customFn = new Function(func);
                    customFn();
                } else if (component.dataBind.action == '组件显示') {
                    this.configData.components.forEach((element) => {
                        if (this.intersection(element.identifiers, component.dataBind.identifiers).length > 0) {
                            element.style.visible = true;
                        } else if (element.identifier.indexOf(component.dataBind.identifiers) > -1) {
                            element.style.visible = true;
                        }
                    });
                } else if (component.dataBind.action == '组件隐藏') {
                    this.configData.components.forEach((element) => {
                        if (this.intersection(element.identifiers, component.dataBind.identifiers).length > 0) {
                            element.style.visible = false;
                        } else if (element.identifier.indexOf(component.dataBind.identifiers) > -1) {
                            element.style.visible = false;
                        }
                    });
                }
            }
        },
        //数据是否有交集
        intersection(arr1, arr2) {
            const result = [];
            if (arr1 && arr1) {
                for (let i = 0; i < arr1.length; i++) {
                    if (arr2.includes(arr1[i])) {
                        result.push(arr1[i]);
                    }
                }
            }
            return result;
        },
        // 判断是在手机还是电脑
        isMobile_pc() {
            let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
            return flag;
        },
        // 判断是在安卓还是ios打开
        is_andriod_ios() {
            var u = navigator.userAgent;
            return {
                //移动终端浏览器版本信息
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile/i) || !!u.match(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1, //是否web程序，没有头部与底部
            };
        },
        getZtData() {
            let query = {
                deviceMac: this.$route.query.deviceImei,
                guid: this.ztGuid,
            };
            let url = '/zutai/bDeviceZt/getZtData';
            request({
                url: url,
                method: 'get',
                headers: {
                    Authorization: 'Bearer ' + this.pageToken,
                },
                params: query,
            }).then((res) => {
                let ztData = res.data;
                this.configData = JSON.parse(ztData.deviceZtData);
                // this.configData.layer.width = document.body.clientWidth;
                // this.configData.layer.height = document.body.clientHeight;
                //修改title值
                document.title = ztData.pageName;
                this.isOnline = ztData.isOnline;
                //双指缩放
                let that = this;
                // console.log("屏幕分辨率",window.screen.width,window.screen.height);
                // render - app;
                if (document.body.clientWidth != this.configData.layer.width) {
                    let box = document.getElementById('render-box');
                    console.log('that.configData.layer.width', that.configData.layer.width, that.configData.layer.height);
                    that.selectedValue = 100;
                    let rateWidth = document.body.clientWidth / that.configData.layer.width;
                    // let rateHeight = document.body.clientHeight / that.configData.layer.height;
                    // that.configData.layer.width = document.body.clientWidth;
                    // that.configData.layer.height = document.body.clientHeight;
                    document.body.style.transformOrigin = '0,0';
                    that.scaleValue = `${rateWidth}`;
                    that.newZoom = rateWidth;
                    // 获取放大或缩小的区域DOM
                    document.body.addEventListener('touchstart', function (event) {
                        var touches = event.touches;
                        var events = touches[0];
                        var events2 = touches[1];
                        // event.preventDefault();
                        // 第一个触摸点的坐标
                        that.displacement.pageX = events.pageX;
                        that.displacement.pageY = events.pageY;
                        that.displacement.moveable = true;
                        if (events2) {
                            that.displacement.pageX2 = events2.pageX;
                            that.displacement.pageY2 = events2.pageY;
                        }
                        that.displacement.originScale = that.displacement.scale || 1;
                    });
                    document.addEventListener('touchmove', function (event) {
                        if (!that.displacement.moveable) {
                            return;
                        }

                        event.preventDefault();

                        var touches = event.touches;
                        var events = touches[0];
                        var events2 = touches[1];
                        // 双指移动
                        if (events2) {
                            // 第2个指头坐标在touchmove时候获取
                            if (!that.displacement.pageX2) {
                                that.displacement.pageX2 = events2.pageX;
                            }
                            if (!that.displacement.pageY2) {
                                that.displacement.pageY2 = events2.pageY;
                            }

                            // 双指缩放比例计算
                            var zoom =
                                that.getDistance(
                                    {
                                        x: events.pageX,
                                        y: events.pageY,
                                    },
                                    {
                                        x: events2.pageX,
                                        y: events2.pageY,
                                    }
                                ) /
                                that.getDistance(
                                    {
                                        x: that.displacement.pageX,
                                        y: that.displacement.pageY,
                                    },
                                    {
                                        x: that.displacement.pageX2,
                                        y: that.displacement.pageY2,
                                    }
                                );
                            // 图像应用缩放效果,使用定时器实现限流防抖

                            if (that.ztTimer) {
                                clearTimeout(that.ztTimer);
                            }
                            that.ztTimer = setTimeout(() => {
                                // console.log("zoom",zoom);
                                if (zoom > 1) {
                                    that.newZoom = that.newZoom + 0.1;
                                    if (that.newZoom > 0.8) {
                                        that.newZoom = 0.8;
                                    }
                                } else {
                                    that.newZoom = that.newZoom - 0.1;
                                    if (that.newZoom < 0.2) {
                                        that.newZoom = 0.2;
                                    }
                                }
                                document.body.style.transform = 'scale(' + that.newZoom + ')';
                                // console.log("newZoom",that.newZoom);
                                // console.log("当前缩放比例",document.body.style.zoom);
                            }, 100);
                        }
                    });
                } else {
                    //缩放
                    if (sessionStorage.getItem('selectedValue-' + this.$store.state.app.guid ? this.$store.state.app.guid : this.$route.query.guid) != 'undefined') {
                        this.selectedValue = Number(sessionStorage.getItem('selectedValue-' + this.$store.state.app.guid ? this.$store.state.app.guid : this.$route.query.guid));
                        if (this.selectedValue < 30) {
                            this.selectedValue = 100;
                        }
                    } else if (this.defaultValue) {
                        this.selectedValue = this.defaultValue;
                    }
                    setTimeout(() => {
                        this.initLeftTop();
                    }, 200);
                }
                // console.log("格式化数据",this.configData);
            });
        },
        controChange(item) {
            if (this.isOnline == false) {
                this.showMessage('warning', '设备不在线,无法设置！');
                return;
            }
            let data = {
                paramField: item.paramField,
                deviceImei: item.imei,
                paramName: item.paramName,
                driveName: item.driveName != {} ? null : item.dataType,
                paramValue: item.paramValue,
                dataType: item.dataType != {} ? null : item.dataType,
            };
            let url = '/zutai/bDeviceRealData/orderSend';
            request({
                url: url,
                method: 'post',
                data: data,
            })
                .then((res) => {
                    this.showMessage('success', '指令下发成功');
                })
                .catch((res) => {
                    // console.log("指令下发失败",res.msg);
                    this.loadingContro = false;
                });
        },
        showMessage(type, msg) {
            this.$notify({
                title: '操作成功',
                message: msg,
                type: type,
                duration: 800,
            });
        },
        mqttAccept(ztData) {
            // console.log("子组件传递父组件的消息",ztData);
            this.setMqttData(ztData);
        },
        getDistance(start, stop) {
            // Math.hypot()计算参数的平方根
            return Math.hypot(stop.x - start.x, stop.y - start.y);
        },
    },
    created() {},
    mounted() {
        this.$notify({
            title: '温馨提示',
            message: '键盘按下F11键或右键开启全屏，按下Esc退出全屏。',
            position: 'top-left',
            duration: 5000,
        });
        this.ztGuid = this.$store.state.app.guid ? this.$store.state.app.guid : this.$route.query.guid;
        this.pageToken = this.$route.query.accessToken;
        console.log(this.$route.query, '路由信息');
        this.getZtData();
        this.getInitData();
    },
    beforeDestroy() {
        clearInterval(this.ztTimer);
        this.ztTimer = null;
        clearInterval(this.deviceTimer);
        this.deviceTimer = null;
        document.body.style.transform = '';
    },
};
</script>

<style lang="scss" scoped>
#render-app {
    position: absolute;
    // overflow: hidden;
    width: 100vw;
    height: 100vh;
    transform-origin: center top;
}

.topo-render {
    overflow: auto;
    background-color: #ffffff;
    background-clip: padding-box;
    background-origin: padding-box;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;
    position: absolute;

    .topo-render-wrapper {
        position: absolute;
        animation: fadeIn 0.8s ease-in-out;
    }

    /* 定义动画关键帧 */
    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes fadeOut {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    .topo-render-wrapper-clickable {
        cursor: pointer;
    }
}

.sfClass {
    height: 40px;
    position: fixed;
    // background-color:white;
    top: 20px;
    right: 15px;
}
</style>
<style>
.offLineNotification {
    top: 10% !important;
    right: 16px !important;
    background: #e6a23c !important;
    width: 230px !important;
    height: 80px !important;
    /* border: 1px solid #43dcff !important; */
}

h2 {
    line-height: 1.1;
}

.el-message-box__message {
    color: #e6a23c !important;
}

body {
    -webkit-text-size-adjust: 100% !important;
}
</style>
<style>
::-webkit-scrollbar-thumb {
    background-color: #e1e1e1;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a5a2a2;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    position: absolute;
}

::-webkit-scrollbar-track {
    background-color: #fff;
}
</style>
